<template>
		<view class="page-section-spacing">
			<swiper :indicator-dots="true" class="swiper" :autoplay="true" :circular="true" :interval="10000" :duration="700" indicator-color="rgba(214, 214, 214, 0.3)" indicator-active-color="#FFFFFF">
				<swiper-item class="swiper-item-content" v-for="(item, index) in bannerList" :key="index">
						<view class="imgWrap">
							<image :src="item.pic + '?param=600y240'" mode="scaleToFill"></image>
							<text :style="{backgroundColor:item.titleColor === 'red'? '#cc4a4a':'#4a79cc'}" class="bannerTitle">{{ item.typeTitle }}</text>
						</view>
				</swiper-item>
			</swiper>
		</view>
</template>

<script>
	export default {
		name:"banner",
		props:['bannerList'],
		data() {
			return {
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>

.page-section-spacing {
	width: 100%;
	.swiper {
		width: 95%;
		margin: 0 5px;
		
		.swiper-item-content{
			text-align: center;
			height: 100%!important;
			width: 100%!important;
			margin: 0 5px;
			.imgWrap {
				width: 96%;
				height: 100%;
				margin: 0 auto;
				border-radius: 18px;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
				.bannerTitle {
					height: 1.1rem;
					line-height: 1.2rem;
					border-top-left-radius: 10px;
					border-bottom-right-radius: 10px;
					position: absolute;
					bottom: 0;
					right: 7px;
					color: white;
					padding: 0.4rem;
					font-size: .8rem;
					font-weight: 500;
				}
			}
			
			
		}
	}
}

</style>
